<template>
    <el-form ref="userRef" :model="userForm" :rules="rules" label-width="80px">
        <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="userForm.nickName" maxlength="30" clearable style="width: 350px;"/>
            <span style="margin-left: 10px;color: rgb(192, 192, 192);">用户昵称不作为登录使用</span>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="userForm.phoneNumber" maxlength="11" minlength="11" clearable style="width: 350px;"/>
            <span style="margin-left: 10px;color: rgb(192, 192, 192);">手机号码不能重复</span>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email" maxlength="50" clearable style="width: 350px;"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">保存修改</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {defineProps, reactive, ref, computed} from "vue";
import {errorMsg, successMsg} from "../../../utils/message";
import {updateSysUser} from "../../../api/user/sysUser"

const userRef = ref()

//  接收父组件传递的值
const props = defineProps({
  user: Object
});

//  响应用户信息
const userForm = computed(() => props.user);

//  校验
const rules = reactive({
    nickName: [{required: true, message: '用户昵称不能为空', trigger: 'blur'}],
    email: [{required: true, message: '用户邮箱不能为空', trigger: 'blur'},
        {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
        }
    ],
    phoneNumber: [
        {required: true, message: '手机号码不能为空', trigger: 'blur'},
        {pattern: /^1[0-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
    ]
})

/** 提交按钮 */
const submit = () => {
  userRef.value.validate((valid) => {
    if (valid) {
        const data = {nickName: props.user.nickName, email: props.user.email, phoneNumber: props.user.phoneNumber}
        updateSysUser(data).then(res => {
            if (res.code == 200){
                successMsg(res.message)
            } else {
                errorMsg(res.message)
            }
        })
    }
  });
};

</script>

<style scoped>

</style>